<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted, computed } from 'vue';
import { Search, Operation, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const columns = [
    {
        title: '客户简称',
        key: 'shortName',
        sortable: true,
    },
    {
        title: '客户编号',
        key: 'customerId',
        sortable: true,
    },
    {
        title: '服务质量',
        key: 'serviceQuality',
        filterable: true,
        customer: true
    },
    {
        title: '合同状态',
        key: 'contractStatus',
        filterable: true
    },
    {
        title: '到期日期',
        key: 'expireDate',
        sortable: true,
    },
    {
        title: '合同金额',
        key: 'contractAmount',
        sortable: true,
    },
    {
        title: '已登记收入',
        key: 'registeredIncome',
        sortable: true,
    },
    {
        title: '已审核收入',
        key: 'auditedIncome',
        sortable: true,
    },
    {
        title: '支出金额',
        key: 'expenseAmount',
        sortable: true,
    },
    {
        title: '退款金额',
        key: 'refundAmount',
        sortable: true,
    },
    {
        title: '利润',
        key: 'profit',
        sortable: true,
    },
    {
        title: '已收费至',
        key: 'chargedTo',
        sortable: true,
    },
    {
        title: '服务产品',
        key: 'serviceProduct',
        filterable: true,
    },
    {
        title: '收费周期',
        key: 'chargeCycle',
        filterable: true,
    },
    {
        title: '首次收费时间',
        key: 'firstChargeTime',
        sortable: true,
    },
    {
        title: '片区',
        key: 'area',
        filterable: true,
    },
    {
        title: '所属部门',
        key: 'department',
        filterable: true,
    },
    {
        title: '客户等级',
        key: 'customerLevel',
        filterable: true,
    },
    {
        title: '续签状态',
        key: 'renewStatus',
        filterable: true,
    }
];

const mockData = ref([]);
const loading = ref(true)
const activeName = ref('first')
const searchKeyword = ref('') // 搜索关键词
const form = ref({})
const dialogVisible = ref(false) // 控制对话框显示/隐藏
const currentEditData = ref({}) // 当前编辑的数据

// 合同对话框中的标签页
const contractDialogTab = ref('contractInfo')

// 编辑合同表单数据
const contractForm = ref({
    contractStatus: '待提交',
    signingDate: '2025-10-20',
    signer: '表格体',
    internalReferrer: '',
    productName: '自定义/代账合同',
    renewalStatus: '未续签',
    contractNumber: 'DZ202510200001',
    backupNumber: '',
    contractYears: 1,
    contractMonths: 0,
    contractStartDate: '2025-10-01',
    contractEndDate: '2026-09-30',
    autoExtension: false,
    voucherHandover: '上门取',
    source: '',
    otherReferrer: '',
    serviceItems: [],
    giftServiceItems: [],
    advanceReceipts: [],
    defaultExpenses: [],
    contractRemarks: '',
    // 提成设置 - 修改为两个字段
    commissionMainType: '按价格比例提成', // 主类型：按价格比例提成、按单提成
    commissionSubType: '不提成' // 子类型：不提成、按比例提成、按固定金额提成
})

// 计算属性：判断是否显示子提成类型选项
const showCommissionSubTypes = computed(() => {
    return contractForm.value.commissionMainType === '按单提成'
})

// 计算属性：根据搜索关键词过滤数据
const filteredData = computed(() => {
    if (!searchKeyword.value) {
        return mockData.value;
    }
    
    const keyword = searchKeyword.value.toLowerCase();
    return mockData.value.filter(item => {
        return (
            (item.shortName && item.shortName.toLowerCase().includes(keyword)) ||
            (item.customerId && item.customerId.toLowerCase().includes(keyword))
        );
    });
});

// 计算属性：自动统计表格中的金额数据（基于过滤后的数据）
const amountStatistics = computed(() => {
    const dataToUse = filteredData.value;
    
    if (!dataToUse || dataToUse.length === 0) {
        return {
            totalAmount: 0,
            receivedAmount: 0,
            unreceivedAmount: 0,
            auditedIncome: 0,
            refundAmount: 0,
            profit: 0
        };
    }

    const stats = dataToUse.reduce((acc, item) => {
        acc.totalAmount += Number(item.contractAmount) || 0;
        acc.receivedAmount += Number(item.registeredIncome) || 0;
        acc.auditedIncome += Number(item.auditedIncome) || 0;
        acc.refundAmount += Number(item.refundAmount) || 0;
        acc.profit += Number(item.profit) || 0;
        return acc;
    }, {
        totalAmount: 0,
        receivedAmount: 0,
        auditedIncome: 0,
        refundAmount: 0,
        profit: 0
    });

    // 未收金额 = 合同金额 - 已登记收入
    stats.unreceivedAmount = stats.totalAmount - stats.receivedAmount;

    return stats;
});

// 打开编辑对话框
const openEditDialog = (row) => {
    currentEditData.value = { ...row }
    
    // 填充合同表单数据 - 将表格行数据映射到表单字段
    contractForm.value.contractStatus = row.contractStatus || '待提交'
    contractForm.value.signingDate = row.signingDate || '2025-10-20'
    contractForm.value.signer = row.signer || '表格体'
    contractForm.value.internalReferrer = row.internalReferrer || ''
    contractForm.value.productName = row.serviceProduct || '自定义/代账合同'
    contractForm.value.renewalStatus = row.renewStatus || '未续签'
    contractForm.value.contractNumber = row.contractNumber || row.customerId + '-DZ'
    contractForm.value.backupNumber = row.backupNumber || ''
    
    // 合同期限
    contractForm.value.contractYears = row.contractYears || 1
    contractForm.value.contractMonths = row.contractMonths || 0
    contractForm.value.contractStartDate = row.contractStartDate || '2025-10-01'
    contractForm.value.contractEndDate = row.expireDate || '2026-09-30'
    
    // 其他字段
    contractForm.value.autoExtension = row.autoExtension || false
    contractForm.value.voucherHandover = row.voucherHandover || '上门取'
    contractForm.value.source = row.source || ''
    contractForm.value.otherReferrer = row.otherReferrer || ''
    contractForm.value.contractRemarks = row.contractRemarks || ''
    
    // 提成设置
    if (row.commissionType === '按价格比例提成' || !row.commissionType) {
        contractForm.value.commissionMainType = '按价格比例提成'
        contractForm.value.commissionSubType = '不提成'
    } else if (row.commissionType === '按单提成') {
        contractForm.value.commissionMainType = '按单提成'
        contractForm.value.commissionSubType = '不提成'
    } else {
        contractForm.value.commissionMainType = '按单提成'
        contractForm.value.commissionSubType = row.commissionType || '不提成'
    }
    
    dialogVisible.value = true
}

// 关闭编辑对话框
const closeEditDialog = () => {
    dialogVisible.value = false
    currentEditData.value = {}
    contractDialogTab.value = 'contractInfo' // 重置标签页
}

// 提交编辑
const submitEdit = () => {
    // 合并提成设置数据
    let commissionType = contractForm.value.commissionMainType
    if (contractForm.value.commissionMainType === '按单提成') {
        commissionType = contractForm.value.commissionSubType
    }

    // 更新数据
    const index = mockData.value.findIndex(item => item.customerId === currentEditData.value.customerId)
    
    if (index !== -1) {
        mockData.value[index] = {
            ...mockData.value[index],
            shortName: contractForm.value.productName.includes('代账') ? currentEditData.value.shortName : contractForm.value.productName,
            contractStatus: contractForm.value.contractStatus,
            renewStatus: contractForm.value.renewalStatus,
            expireDate: contractForm.value.contractEndDate,
            serviceProduct: contractForm.value.productName,
            commissionType: commissionType,
            // 更新金额相关字段
            contractAmount: contractForm.value.contractAmount || currentEditData.value.contractAmount,
            registeredIncome: contractForm.value.registeredIncome || currentEditData.value.registeredIncome,
            auditedIncome: contractForm.value.auditedIncome || currentEditData.value.auditedIncome,
            expenseAmount: contractForm.value.expenseAmount || currentEditData.value.expenseAmount,
            refundAmount: contractForm.value.refundAmount || currentEditData.value.refundAmount,
            profit: contractForm.value.profit || currentEditData.value.profit,
            // 其他合同字段
            signingDate: contractForm.value.signingDate,
            signer: contractForm.value.signer,
            internalReferrer: contractForm.value.internalReferrer,
            backupNumber: contractForm.value.backupNumber,
            contractStartDate: contractForm.value.contractStartDate,
            autoExtension: contractForm.value.autoExtension,
            voucherHandover: contractForm.value.voucherHandover,
            source: contractForm.value.source,
            otherReferrer: contractForm.value.otherReferrer,
            contractRemarks: contractForm.value.contractRemarks
        }
        ElMessage.success('客户信息修改成功')
    }
    
    closeEditDialog()
}

// 删除数据
const handleDelete = (row) => {
    ElMessageBox.confirm(
        `确定要删除客户 "${row.shortName}" 吗？此操作不可恢复。`,
        '确认删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const index = mockData.value.findIndex(item => item.customerId === row.customerId)
        
        if (index !== -1) {
            mockData.value.splice(index, 1)
            ElMessage.success('客户删除成功')
        }
    }).catch(() => {
        // 用户取消删除
    })
}

const handleClick = (tab, event) => {
    console.log(tab, event);

    loading.value = true
    setTimeout(() => {
        if (activeName.value === 'first') {
            mockData.value = [
                {
                    shortName: 'A公司',
                    customerId: 'C001',
                    serviceQuality: '优秀',
                    contractStatus: '正常',
                    expireDate: '2024-12-31',
                    contractAmount: 50000,
                    registeredIncome: 45000,
                    auditedIncome: 42000,
                    expenseAmount: 12000,
                    refundAmount: 0,
                    profit: 30000,
                    chargedTo: '2024-06',
                    serviceProduct: '财税代理',
                    chargeCycle: '年付',
                    firstChargeTime: '2023-01-15',
                    area: '华东区',
                    department: '财税部',
                    customerLevel: 'VIP客户',
                    renewStatus: '已续签',
                    // 添加合同管理表单所需字段
                    signingDate: '2023-01-01',
                    signer: '张经理',
                    internalReferrer: '李推荐',
                    backupNumber: 'BK001',
                    contractStartDate: '2023-01-01',
                    autoExtension: true,
                    voucherHandover: '上门取',
                    source: '线上推广',
                    otherReferrer: '王推荐',
                    contractRemarks: '重要客户，需要重点关注',
                    commissionType: '按价格比例提成'
                },
                {
                    shortName: 'B企业',
                    customerId: 'C002',
                    serviceQuality: '良好',
                    contractStatus: '即将到期',
                    expireDate: '2024-05-15',
                    contractAmount: 38000,
                    registeredIncome: 38000,
                    auditedIncome: 35000,
                    expenseAmount: 10000,
                    refundAmount: 2000,
                    profit: 23000,
                    chargedTo: '2024-04',
                    serviceProduct: '税务筹划',
                    chargeCycle: '半年付',
                    firstChargeTime: '2022-08-20',
                    area: '华南区',
                    department: '税务部',
                    customerLevel: '普通客户',
                    renewStatus: '待续签',
                    // 添加合同管理表单所需字段
                    signingDate: '2022-08-01',
                    signer: '李经理',
                    internalReferrer: '张推荐',
                    backupNumber: 'BK002',
                    contractStartDate: '2022-08-01',
                    autoExtension: false,
                    voucherHandover: '邮寄',
                    source: '客户推荐',
                    otherReferrer: '',
                    contractRemarks: '项目已完成，客户满意度高',
                    commissionType: '按单提成'
                },
                {
                    shortName: 'C集团',
                    customerId: 'C003',
                    serviceQuality: '合格',
                    contractStatus: '已过期',
                    expireDate: '2024-02-28',
                    contractAmount: 65000,
                    registeredIncome: 60000,
                    auditedIncome: 58000,
                    expenseAmount: 18000,
                    refundAmount: 0,
                    profit: 40000,
                    chargedTo: '2024-02',
                    serviceProduct: '财务顾问',
                    chargeCycle: '季付',
                    firstChargeTime: '2021-05-10',
                    area: '华北区',
                    department: '顾问部',
                    customerLevel: '重要客户',
                    renewStatus: '未续签',
                    // 添加合同管理表单所需字段
                    signingDate: '2021-05-01',
                    signer: '王经理',
                    internalReferrer: '',
                    backupNumber: 'BK003',
                    contractStartDate: '2021-05-01',
                    autoExtension: true,
                    voucherHandover: '客户送',
                    source: '展会',
                    otherReferrer: '赵推荐',
                    contractRemarks: '长期合作客户',
                    commissionType: '不提成'
                }
            ]
        } else {
            mockData.value = [
                {
                    shortName: 'D科技',
                    customerId: 'C004',
                    serviceQuality: '优秀',
                    contractStatus: '正常',
                    expireDate: '2024-11-30',
                    contractAmount: 42000,
                    registeredIncome: 42000,
                    auditedIncome: 40000,
                    expenseAmount: 11000,
                    refundAmount: 0,
                    profit: 29000,
                    chargedTo: '2024-05',
                    serviceProduct: '财税代理',
                    chargeCycle: '年付',
                    firstChargeTime: '2023-03-10',
                    area: '华东区',
                    department: '财税部',
                    customerLevel: '普通客户',
                    renewStatus: '已续签',
                    // 添加合同管理表单所需字段
                    signingDate: '2023-03-01',
                    signer: '刘经理',
                    internalReferrer: '孙推荐',
                    backupNumber: 'BK004',
                    contractStartDate: '2023-03-01',
                    autoExtension: true,
                    voucherHandover: '上门取',
                    source: '广告投放',
                    otherReferrer: '',
                    contractRemarks: '新客户，需要跟进',
                    commissionType: '按比例提成'
                },
                {
                    shortName: 'E贸易',
                    customerId: 'C005',
                    serviceQuality: '良好',
                    contractStatus: '即将到期',
                    expireDate: '2024-06-20',
                    contractAmount: 55000,
                    registeredIncome: 50000,
                    auditedIncome: 48000,
                    expenseAmount: 15000,
                    refundAmount: 1000,
                    profit: 33000,
                    chargedTo: '2024-05',
                    serviceProduct: '税务筹划',
                    chargeCycle: '半年付',
                    firstChargeTime: '2022-11-05',
                    area: '华南区',
                    department: '税务部',
                    customerLevel: '重要客户',
                    renewStatus: '待续签',
                    // 添加合同管理表单所需字段
                    signingDate: '2022-11-01',
                    signer: '陈经理',
                    internalReferrer: '吴推荐',
                    backupNumber: 'BK005',
                    contractStartDate: '2022-11-01',
                    autoExtension: false,
                    voucherHandover: '邮寄',
                    source: '合作伙伴',
                    otherReferrer: '郑推荐',
                    contractRemarks: '咨询项目，需要定期汇报',
                    commissionType: '按固定金额提成'
                }
            ]
        }
        loading.value = false
    }, 2000)
}

// 处理搜索
const handleSearch = () => {
    // 搜索逻辑已通过计算属性filteredData实现
    console.log('搜索关键词:', searchKeyword.value);
}

// 清除搜索
const clearSearch = () => {
    searchKeyword.value = '';
}

onMounted(() => {
    setTimeout(() => {
        mockData.value = [
            {
                shortName: 'A公司',
                customerId: 'C001',
                serviceQuality: '优秀',
                contractStatus: '正常',
                expireDate: '2024-12-31',
                contractAmount: 50000,
                registeredIncome: 45000,
                auditedIncome: 42000,
                expenseAmount: 12000,
                refundAmount: 0,
                profit: 30000,
                chargedTo: '2024-06',
                serviceProduct: '财税代理',
                chargeCycle: '年付',
                firstChargeTime: '2023-01-15',
                area: '华东区',
                department: '财税部',
                customerLevel: 'VIP客户',
                renewStatus: '已续签',
                // 添加合同管理表单所需字段
                signingDate: '2023-01-01',
                signer: '张经理',
                internalReferrer: '李推荐',
                backupNumber: 'BK001',
                contractStartDate: '2023-01-01',
                autoExtension: true,
                voucherHandover: '上门取',
                source: '线上推广',
                otherReferrer: '王推荐',
                contractRemarks: '重要客户，需要重点关注',
                commissionType: '按价格比例提成'
            },
            {
                shortName: 'B企业',
                customerId: 'C002',
                serviceQuality: '良好',
                contractStatus: '即将到期',
                expireDate: '2024-05-15',
                contractAmount: 38000,
                registeredIncome: 38000,
                auditedIncome: 35000,
                expenseAmount: 10000,
                refundAmount: 2000,
                profit: 23000,
                chargedTo: '2024-04',
                serviceProduct: '税务筹划',
                chargeCycle: '半年付',
                firstChargeTime: '2022-08-20',
                area: '华南区',
                department: '税务部',
                customerLevel: '普通客户',
                renewStatus: '待续签',
                // 添加合同管理表单所需字段
                signingDate: '2022-08-01',
                signer: '李经理',
                internalReferrer: '张推荐',
                backupNumber: 'BK002',
                contractStartDate: '2022-08-01',
                autoExtension: false,
                voucherHandover: '邮寄',
                source: '客户推荐',
                otherReferrer: '',
                contractRemarks: '项目已完成，客户满意度高',
                commissionType: '按单提成'
            },
            {
                shortName: 'C集团',
                customerId: 'C003',
                serviceQuality: '合格',
                contractStatus: '已过期',
                expireDate: '2024-02-28',
                contractAmount: 65000,
                registeredIncome: 60000,
                auditedIncome: 58000,
                expenseAmount: 18000,
                refundAmount: 0,
                profit: 40000,
                chargedTo: '2024-02',
                serviceProduct: '财务顾问',
                chargeCycle: '季付',
                firstChargeTime: '2021-05-10',
                area: '华北区',
                department: '顾问部',
                customerLevel: '重要客户',
                renewStatus: '未续签',
                // 添加合同管理表单所需字段
                signingDate: '2021-05-01',
                signer: '王经理',
                internalReferrer: '',
                backupNumber: 'BK003',
                contractStartDate: '2021-05-01',
                autoExtension: true,
                voucherHandover: '客户送',
                source: '展会',
                otherReferrer: '赵推荐',
                contractRemarks: '长期合作客户',
                commissionType: '不提成'
            }
        ]
        loading.value = false
    }, 2000)
})

// 格式化金额显示
const formatAmount = (amount) => {
    return amount.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
}
</script>

<template>
    <div class="my-clue">
        <div class="top-filter">
            <div class="top-filter-left">
                <stick-popup>
                    <template #show>
                        <div class="top-filter-btn">
                            <div class="top-filter-btn-label">
                                筛选
                            </div>
                            <div class="top-filter-btn-icon">
                                <Operation />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <!-- 筛选表单 -->
                        <div class="top-filter-form">
                            <el-form :model="form" label-width="100px">
                                <el-form-item label="到期时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span class="date-separator">到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                    <div class="quick-options">
                                        <el-checkbox label="3个月内到期" />
                                        <el-checkbox label="2个月内到期" />
                                        <el-checkbox label="本月到期" />
                                        <el-checkbox label="已到期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="续签状态">
                                    <div class="checkbox-group">
                                        <el-checkbox-group>
                                            <el-checkbox label="未续签" />
                                            <el-checkbox label="原合同续签" />
                                            <el-checkbox label="已连续签合同" />
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="服务产品">
                                    <el-input placeholder="搜索服务产品" />
                                </el-form-item>
                                <el-form-item label="服务项目">
                                    <el-input placeholder="搜索服务项目" />
                                </el-form-item>
                                <el-form-item label="客户状态">
                                    <div class="radio-group">
                                        <el-radio-group>
                                            <el-radio label="全部" />
                                            <el-radio label="正常" />
                                            <el-radio label="暂停" />
                                            <el-radio label="流失" />
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="服务角色">
                                    <div class="service-role-section">
                                        <span class="role-label">服务顾问</span>
                                        <el-input placeholder="搜索服务顾问" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="签单人">
                                    <el-input placeholder="搜索签单人" />
                                </el-form-item>
                                <el-form-item label="所属部门">
                                    <div class="department-section">
                                        <el-input placeholder="搜索所属部门" />
                                        <div class="include-subordinate">
                                            <el-checkbox label="部门包含下级" />
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="增值税类型">
                                    <div class="radio-group">
                                        <el-radio-group>
                                            <el-radio label="全部" />
                                            <el-radio label="一般纳税人" />
                                            <el-radio label="小规模纳税人" />
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="客户标签">
                                    <el-input placeholder="搜索客户标签" />
                                </el-form-item>
                                <el-form-item label="收费周期">
                                    <div class="radio-group">
                                        <el-radio-group>
                                            <el-radio label="全部" />
                                            <el-radio label="每月收" />
                                            <el-radio label="三个月收" />
                                            <el-radio label="半年收" />
                                            <el-radio label="一年收" />
                                            <el-radio label="一次性收" />
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="首次收费时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span class="date-separator">到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="已收费至">
                                    <div class="date-range">
                                        <el-date-picker type="month" placeholder="请选择月份" />
                                        <span class="date-separator">到</span>
                                        <el-date-picker type="month" placeholder="请选择月份" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="片区">
                                    <el-input placeholder="搜索片区" />
                                </el-form-item>
                                <el-form-item label="客户等级">
                                    <el-input placeholder="搜索客户等级" />
                                </el-form-item>
                                <el-form-item label="内部推荐人">
                                    <el-input placeholder="搜索内部推荐人" />
                                </el-form-item>
                                <el-form-item label="合同审核时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span class="date-separator">到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="财务审核时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span class="date-separator">到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="合同签约类型">
                                    <div class="radio-group">
                                        <el-radio-group>
                                            <el-radio label="全部" />
                                            <el-radio label="续签" />
                                            <el-radio label="新签" />
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="有无附件">
                                    <div class="radio-group">
                                        <el-radio-group>
                                            <el-radio label="全部" />
                                            <el-radio label="有" />
                                            <el-radio label="无" />
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="联系人">
                                    <el-input placeholder="搜索联系人" />
                                </el-form-item>
                                <el-form-item label="开票状态">
                                    <div class="checkbox-group">
                                        <el-checkbox-group>
                                            <el-checkbox label="未开票" />
                                            <el-checkbox label="部分开票" />
                                            <el-checkbox label="已开完" />
                                            <el-checkbox label="无需开票" />
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="top-filter-operate">
                            <el-button type="text">重置</el-button>
                            <el-button type="primary">确认</el-button>
                        </div>
                    </template>
                </stick-popup>
                <div class="top-filter-search">
                    <el-input v-model="searchKeyword" placeholder="请输入客户简称或客户编号" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="top-filter-right">
                <el-button type="primary">续费提醒</el-button>
                <el-button type="primary">导出</el-button>
            </div>
        </div>

        <!-- 编辑客户信息对话框 - 使用完整的合同管理表单 -->
        <el-dialog 
            v-model="dialogVisible" 
            title="修改客户信息" 
            width="90%" 
            :before-close="closeEditDialog"
            class="edit-dialog contract-dialog"
        >
            <div class="contract-dialog-tabs">
                <el-tabs v-model="contractDialogTab" class="contract-tabs">
                    <!-- 合同信息标签页 -->
                    <el-tab-pane label="合同信息" name="contractInfo">
                        <div class="contract-form-container">
                            <!-- 合同基本信息区域 -->
                            <div class="contract-basic-info">
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>合同状态</label>
                                        <el-input v-model="contractForm.contractStatus" placeholder="待提交" disabled />
                                    </div>
                                    <div class="form-item">
                                        <label>签单日期</label>
                                        <el-date-picker v-model="contractForm.signingDate" type="date" placeholder="选择日期" style="width: 100%" />
                                    </div>
                                    <div class="form-item">
                                        <label>签单人</label>
                                        <el-select v-model="contractForm.signer" placeholder="请选择" style="width: 100%">
                                            <el-option label="表格体" value="表格体" />
                                            <el-option label="张三" value="张三" />
                                            <el-option label="李四" value="李四" />
                                            <el-option label="王五" value="王五" />
                                        </el-select>
                                    </div>
                                    <div class="form-item">
                                        <label>内部推荐人</label>
                                        <el-select v-model="contractForm.internalReferrer" placeholder="请选择" style="width: 100%">
                                            <el-option label="请选择" value="" />
                                            <el-option label="李四" value="李四" />
                                            <el-option label="张三" value="张三" />
                                            <el-option label="孙八" value="孙八" />
                                        </el-select>
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>产品名称</label>
                                        <el-select v-model="contractForm.productName" placeholder="请选择" style="width: 100%">
                                            <el-option label="自定义/代账合同" value="自定义/代账合同" />
                                            <el-option label="财税代理" value="财税代理" />
                                            <el-option label="税务筹划" value="税务筹划" />
                                            <el-option label="财务顾问" value="财务顾问" />
                                        </el-select>
                                    </div>
                                    <div class="form-item">
                                        <label>续签状态</label>
                                        <el-select v-model="contractForm.renewalStatus" placeholder="请选择" style="width: 100%">
                                            <el-option label="未续签" value="未续签" />
                                            <el-option label="已续签" value="已续签" />
                                            <el-option label="待续签" value="待续签" />
                                        </el-select>
                                    </div>
                                    <div class="form-item required">
                                        <label>合同编号</label>
                                        <el-input v-model="contractForm.contractNumber" disabled />
                                    </div>
                                    <div class="form-item required">
                                        <label>备用编号</label>
                                        <el-input v-model="contractForm.backupNumber" placeholder="请填写" />
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>签约期限</label>
                                        <div class="contract-term">
                                            <el-input-number v-model="contractForm.contractYears" :min="0" :max="99" />
                                            <span>年</span>
                                            <el-input-number v-model="contractForm.contractMonths" :min="0" :max="11" />
                                            <span>月</span>
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <label>合同有效期</label>
                                        <div class="date-range">
                                            <el-date-picker v-model="contractForm.contractStartDate" type="date" placeholder="开始日期" style="width: 48%" />
                                            <span>至</span>
                                            <el-date-picker v-model="contractForm.contractEndDate" type="date" placeholder="结束日期" style="width: 48%" />
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>自动延期</label>
                                        <div class="radio-group">
                                            <el-radio-group v-model="contractForm.autoExtension">
                                                <el-radio :label="true">是</el-radio>
                                                <el-radio :label="false">否</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <label>凭证交接</label>
                                        <el-select v-model="contractForm.voucherHandover" placeholder="请选择" style="width: 100%">
                                            <el-option label="上门取" value="上门取" />
                                            <el-option label="邮寄" value="邮寄" />
                                            <el-option label="客户送" value="客户送" />
                                        </el-select>
                                    </div>
                                    <div class="form-item required">
                                        <label>来源</label>
                                        <el-select v-model="contractForm.source" placeholder="请选择" style="width: 100%">
                                            <el-option label="请选择" value="" />
                                            <el-option label="线上推广" value="线上推广" />
                                            <el-option label="客户推荐" value="客户推荐" />
                                            <el-option label="展会" value="展会" />
                                            <el-option label="广告投放" value="广告投放" />
                                            <el-option label="合作伙伴" value="合作伙伴" />
                                        </el-select>
                                    </div>
                                    <div class="form-item">
                                        <label>其他推荐人</label>
                                        <el-input v-model="contractForm.otherReferrer" placeholder="请填写" />
                                    </div>
                                </div>
                            </div>

                            <!-- 服务项区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>服务项(O)</span>
                                    <div class="section-actions">
                                        <el-button type="primary" size="small">添加服务项目</el-button>
                                        <el-button type="primary" size="small">合同变更</el-button>
                                        <el-button type="primary" size="small">签单折扣</el-button>
                                    </div>
                                </div>
                                <div class="empty-section">
                                    <span>暂无服务项</span>
                                </div>
                            </div>

                            <!-- 赠送服务项区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>赠送服务项(O)</span>
                                    <div class="section-actions">
                                        <el-button type="primary" size="small">添加赠送服务项目</el-button>
                                    </div>
                                </div>
                                <div class="empty-section">
                                    <span>暂无赠送服务项</span>
                                </div>
                            </div>

                            <!-- 预收款区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>预收款*</span>
                                </div>
                                <div class="empty-section">
                                    <span>暂无预收款</span>
                                </div>
                            </div>

                            <!-- 默认支出区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>默认支出</span>
                                </div>
                                <div class="empty-section">
                                    <span>暂无默认支出</span>
                                </div>
                            </div>

                            <!-- 合同备注区域 -->
                            <div class="remarks-section">
                                <label>合同备注</label>
                                <el-input 
                                    v-model="contractForm.contractRemarks" 
                                    type="textarea" 
                                    placeholder="请输入" 
                                    :rows="3" 
                                    maxlength="1000"
                                    show-word-limit
                                />
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 回款计划标签页 -->
                    <el-tab-pane label="回款计划" name="paymentPlan">
                        <div class="empty-state">
                            <p>还没有回款计划哦!</p>
                        </div>
                    </el-tab-pane>

                    <!-- 收支开票标签页 -->
                    <el-tab-pane label="收支开票" name="incomeExpense">
                        <div class="income-expense-container">
                            <div class="section">
                                <h3>收支开票情况</h3>
                                <div class="empty-state">
                                    <p>暂无收支开票</p>
                                </div>
                            </div>
                            
                            <!-- 收费记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>收费记录</h3>
                                    <el-button type="primary" size="small">登记收费</el-button>
                                </div>
                                <div class="record-table">
                                    <table class="custom-table">
                                        <thead>
                                            <tr>
                                                <th>登记时间</th>
                                                <th>收费服务项</th>
                                                <th>登记人</th>
                                                <th>审核状态</th>
                                                <th>实收金额</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2025-10-27 10:17</td>
                                                <td>代理记账</td>
                                                <td>表情休</td>
                                                <td>待审核</td>
                                                <td>0.00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 支出记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>支出记录</h3>
                                    <el-button type="primary" size="small">添加支出</el-button>
                                </div>
                                <div class="empty-state">
                                    <p>暂无支出记录</p>
                                </div>
                            </div>
                            
                            <!-- 退款记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>退款记录</h3>
                                    <el-button type="primary" size="small">退款</el-button>
                                </div>
                                <div class="empty-state">
                                    <p>暂无退款记录</p>
                                </div>
                            </div>
                            
                            <!-- 开票记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>开票记录</h3>
                                    <el-button type="primary" size="small">申请开票</el-button>
                                </div>
                                <div class="empty-state">
                                    <p>暂无开票记录</p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 合同附件标签页 -->
                    <el-tab-pane label="合同附件" name="contractAttachments">
                        <div class="attachments-container">
                            <div class="upload-area">
                                <div class="upload-content">
                                    <p>拖拽文件到此处或 <el-button type="primary" link>点击上传</el-button></p>
                                    <p class="upload-tip">文件可上传jpg、png、jpeg、doc、docx、xls、xlsx、pdf类型文件，每次上传不超过10M</p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 提成设置标签页 -->
                    <el-tab-pane label="提成设置" name="commissionSettings">
                        <div class="commission-container">
                            <div class="commission-section">
                                <h3 class="commission-title">签单提成</h3>
                                <div class="commission-options">
                                    <!-- 主提成类型 -->
                                    <div class="commission-row">
                                        <el-radio v-model="contractForm.commissionMainType" label="按价格比例提成">按价格比例提成</el-radio>
                                        <el-radio v-model="contractForm.commissionMainType" label="按单提成">按单提成</el-radio>
                                    </div>
                                    
                                    <!-- 子提成类型 - 只在选择"按单提成"时显示 -->
                                    <div v-if="showCommissionSubTypes" class="commission-sub-options">
                                        <div class="commission-row">
                                            <el-radio v-model="contractForm.commissionSubType" label="不提成">不提成</el-radio>
                                            <el-radio v-model="contractForm.commissionSubType" label="按比例提成">按比例提成</el-radio>
                                            <el-radio v-model="contractForm.commissionSubType" label="按固定金额提成">按固定金额提成</el-radio>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 当前选择的提成方式提示 -->
                                <div class="commission-selection-info">
                                    <p>当前选择的提成方式: 
                                        <span class="selection-text">
                                            {{ contractForm.commissionMainType === '按价格比例提成' ? 
                                                '按价格比例提成' : 
                                                contractForm.commissionSubType }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeEditDialog">取消</el-button>
                    <el-button type="primary" @click="submitEdit">保存修改</el-button>
                </span>
            </template>
        </el-dialog>

        <div class="table-area">
            <div class="table-area-tab">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="全部代账客户" name="first"></el-tab-pane>
                    <el-tab-pane label="已过期客户" name="second"></el-tab-pane>
                    <el-tab-pane label="当月过期客户" name="third"></el-tab-pane>
                    <el-tab-pane label="下月过期客户" name="fourth"></el-tab-pane>
                    <el-tab-pane label="3个月内过期客户" name="fifth"></el-tab-pane>
                </el-tabs>
            </div>

            <!-- 搜索结果显示 -->
            <div v-if="searchKeyword" class="search-result-info">
                <span>搜索"{{ searchKeyword }}"的结果，共找到 {{ filteredData.length }} 条记录</span>
                <el-button type="text" @click="clearSearch">清除搜索</el-button>
            </div>

            <!-- 金额统计栏 - 按照第一串代码的样式 -->
            <div class="amount-statistics">
                <div class="stat-item">
                    <span class="stat-label">总金额:</span>
                    <span class="stat-value">{{ formatAmount(amountStatistics.totalAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已收:</span>
                    <span class="stat-value received">{{ formatAmount(amountStatistics.receivedAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">未收:</span>
                    <span class="stat-value unreceived">{{ formatAmount(amountStatistics.unreceivedAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已审核收入:</span>
                    <span class="stat-value">{{ formatAmount(amountStatistics.auditedIncome) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">退款金额:</span>
                    <span class="stat-value refund">{{ formatAmount(amountStatistics.refundAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">利润:</span>
                    <span class="stat-value">{{ formatAmount(amountStatistics.profit) }}</span>
                </div>
            </div>

            <div class="table-area-table">
                <my-table :loading="loading" :columns="columns" :dataSource="filteredData" :showIndex="true"
                    :show-operation="true">
                    <template #data-serviceQuality="scope">
                        <span>{{ scope.data }}</span>
                    </template>
                    <template #filter-serviceQuality>
                        <span>服务质量</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-contractStatus>
                        <span>合同状态</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #operation="{ row }">
                        <div class="operation-buttons">
                            <el-button 
                                type="primary" 
                                size="small" 
                                :icon="Edit"
                                @click="openEditDialog(row)"
                                class="edit-btn"
                            >
                                修改
                            </el-button>
                            <el-button 
                                type="danger" 
                                size="small" 
                                :icon="Delete"
                                @click="handleDelete(row)"
                                class="delete-btn"
                            >
                                删除
                            </el-button>
                        </div>
                    </template>
                </my-table>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.my-clue {
    width: 100%;
    height: 100%;
    background-color: rgb(239, 239, 239);
    overflow: auto;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}

.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;

    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;

        .top-filter-btn-icon {
            width: 20px;
            height: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .top-filter-search {
        width: 300px; /* 增加宽度以容纳更长的提示文本 */
    }
}

.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;

    .table-area-tab {
        width: 100%;
        box-sizing: border-box;
    }

    .table-area-table {
        width: 100%;
        box-sizing: border-box;
    }
}

.top-filter-form {
    width: 600px;
    background-color: #fff;
    padding: 16px;
}

.top-filter-operate {
    width: 600px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    padding: 0 16px;
    background: #fff;
}

/* 表单样式调整 */
:deep(.el-form-item) {
    margin-bottom: 16px;
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* 服务角色特殊样式 */
.service-role-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-label {
    width: 80px;
    font-size: 14px;
    color: #606266;
}

/* 所属部门特殊样式 */
.department-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.include-subordinate {
    margin-top: 4px;
}

/* 搜索结果显示样式 */
.search-result-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f9ff;
    padding: 10px 16px;
    margin: 16px 0;
    border-radius: 4px;
    border-left: 4px solid #1890ff;
    color: #1890ff;
    font-size: 14px;
}

/* 金额统计栏样式 - 按照第一串代码的样式 */
.amount-statistics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 12px 20px;
    margin: 16px 0;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.stat-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.stat-value {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

/* 按照图片中的颜色设置 */
.stat-value.received,
.stat-value.unreceived,
.stat-value.refund {
    color: #e6a23c;
    /* 橙色 */
}

/* 操作按钮样式 */
.operation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.edit-btn,
.delete-btn {
    min-width: 60px;
}

/* 编辑对话框样式 */
.edit-dialog {
    &.contract-dialog {
        .contract-dialog-tabs {
            max-height: 70vh;
            overflow-y: auto;
            padding-right: 10px;
        }

        .contract-tabs {
            :deep(.el-tabs__header) {
                margin-bottom: 20px;
            }
        }

        .contract-basic-info {
            margin-bottom: 20px;
        }

        .form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
            align-items: flex-start;

            .form-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                
                label {
                    font-size: 14px;
                    margin-bottom: 6px;
                    color: #333;
                    
                    &.required::before {
                        content: '*';
                        color: #f56c6c;
                        margin-right: 4px;
                    }
                }
            }
        }

        .contract-term {
            display: flex;
            align-items: center;
            gap: 8px;
            
            :deep(.el-input-number) {
                width: 80px;
            }
            
            span {
                color: #666;
                font-size: 14px;
            }
        }

        .date-range {
            display: flex;
            align-items: center;
            gap: 8px;
            
            span {
                color: #666;
                font-size: 14px;
            }
        }

        .radio-group {
            display: flex;
            gap: 16px;
            margin-top: 6px;
        }

        .service-section {
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            
            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                background-color: #f8f9fa;
                border-bottom: 1px solid #e9ecef;
                
                span {
                    font-weight: 600;
                    color: #333;
                }
                
                .section-actions {
                    display: flex;
                    gap: 8px;
                }
            }
            
            .empty-section {
                padding: 40px 20px;
                text-align: center;
                color: #999;
                background-color: #fff;
            }
        }

        .remarks-section {
            margin-bottom: 20px;
            
            label {
                display: block;
                font-size: 14px;
                margin-bottom: 6px;
                color: #333;
            }
        }

        .submit-section {
            text-align: center;
            padding: 20px;
            border-top: 1px solid #e9ecef;
            margin-top: 20px;
            
            .submit-tip {
                margin-left: 12px;
                color: #999;
                font-size: 14px;
            }
        }

        /* 空状态样式 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: #999;
            background-color: #fff;
            border-radius: 4px;
            border: 1px dashed #e9ecef;
            
            p {
                margin: 0;
                font-size: 16px;
            }
        }

        /* 收支开票样式 */
        .income-expense-container {
            .section {
                margin-bottom: 24px;
                
                h3 {
                    margin-bottom: 12px;
                    font-size: 16px;
                    color: #333;
                    font-weight: 600;
                }
                
                .section-header-with-button {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 12px;
                    
                    h3 {
                        margin-bottom: 0;
                    }
                }
                
                .empty-state {
                    padding: 30px 20px;
                }
                
                .record-table {
                    background-color: #fff;
                    border-radius: 4px;
                    border: 1px solid #e9ecef;
                    overflow: hidden;
                    
                    .custom-table {
                        width: 100%;
                        border-collapse: collapse;
                        
                        th, td {
                            padding: 12px 16px;
                            text-align: left;
                            border-bottom: 1px solid #e9ecef;
                        }
                        
                        th {
                            background-color: #f8f9fa;
                            font-weight: 600;
                            color: #333;
                        }
                        
                        td {
                            color: #666;
                        }
                        
                        tr:last-child td {
                            border-bottom: none;
                        }
                    }
                }
            }
        }

        /* 合同附件样式 */
        .attachments-container {
            .upload-area {
                border: 2px dashed #e9ecef;
                border-radius: 6px;
                padding: 60px 20px;
                text-align: center;
                background-color: #fafafa;
                transition: border-color 0.3s;
                
                &:hover {
                    border-color: #409eff;
                }
                
                .upload-content {
                    p {
                        margin: 8px 0;
                        color: #666;
                    }
                    
                    .upload-tip {
                        font-size: 14px;
                        color: #999;
                    }
                }
            }
        }

        /* 提成设置样式 */
        .commission-container {
            padding: 20px;
            
            .commission-section {
                .commission-title {
                    font-size: 16px;
                    font-weight: 600;
                    color: #333;
                    margin-bottom: 20px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #e9ecef;
                }
                
                .commission-options {
                    display: flex;
                    flex-direction: column;
                    gap: 24px;
                    
                    .commission-row {
                        display: flex;
                        gap: 40px;
                        
                        :deep(.el-radio) {
                            margin-right: 0;
                        }
                    }
                    
                    .commission-sub-options {
                        margin-left: 20px;
                        padding: 16px;
                        background-color: #f8f9fa;
                        border-radius: 6px;
                        border-left: 4px solid #409eff;
                        
                        .commission-row {
                            gap: 30px;
                        }
                    }
                }
                
                .commission-selection-info {
                    margin-top: 20px;
                    padding: 12px 16px;
                    background-color: #f0f9ff;
                    border-radius: 4px;
                    border: 1px solid #e1f5fe;
                    
                    p {
                        margin: 0;
                        font-size: 14px;
                        color: #666;
                    }
                    
                    .selection-text {
                        font-weight: 600;
                        color: #1890ff;
                    }
                }
            }
        }

        .dialog-footer {
            display: flex;
            justify-content: center;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid #e9ecef;
        }

        /* 滚动条样式 */
        &::-webkit-scrollbar {
            width: 6px;
        }
        
        &::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        &::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        
        &::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    }
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .amount-statistics {
        justify-content: flex-start;
    }
    
    .edit-dialog {
        width: 90% !important;
    }
    
    .contract-dialog-tabs .form-row {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .amount-statistics {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .stat-item {
        width: 100%;
        justify-content: space-between;
    }
    
    .top-filter {
        height: auto;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }
    
    .top-filter-left {
        width: 100%;
        justify-content: space-between;
    }
    
    .top-filter-right {
        width: 100%;
        justify-content: flex-end;
    }
    
    .search-result-info {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .operation-buttons {
        flex-direction: column;
        gap: 4px;
    }
    
    .edit-btn,
    .delete-btn {
        min-width: 50px;
        font-size: 12px;
    }
    
    .edit-dialog {
        width: 95% !important;
    }
    
    .commission-options .commission-row {
        flex-direction: column;
        gap: 16px !important;
    }
    
    .commission-sub-options {
        margin-left: 0 !important;
    }
}
</style>